fix(search): stop using placeholder as Search region name #57 by airikej · Pull Request #764 · TEDI-Design-System/react

airikej · 2026-07-29T06:25:47Z

Summary by CodeRabbit

Bug Fixes
- Improved screen reader behavior for the Search component by preventing placeholder text from being announced as the search region label.
- Search regions now use a consistent default accessible label.
- Custom accessible labels are correctly applied when provided.

coderabbitai · 2026-07-29T06:25:56Z

Warning

Review limit reached

@airikej, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 17 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 89c71f9a-e621-4339-a22b-453ccc782f95

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6e44e and 6074c71.

📒 Files selected for processing (2)

src/tedi/components/form/search/search.spec.tsx
src/tedi/components/form/search/search.tsx

📝 Walkthrough

Walkthrough

The Search component now uses ariaLabel or the generic search label for its search landmark instead of the input placeholder. Tests cover both the default behavior and custom accessible labels.

Changes

Search accessibility labeling

Layer / File(s)	Summary
Search landmark label and coverage `src/tedi/components/form/search/search.tsx`, `src/tedi/components/form/search/search.spec.tsx`	The search landmark uses `ariaLabel ?? getLabel('search')`, with tests verifying that placeholders are not reused and custom labels are applied.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: the Search region no longer uses the placeholder as its accessible name.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/57-search-wcag-react-issues-1

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

codecov · 2026-07-29T06:29:10Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

airikej · 2026-07-29T06:43:34Z

@coderabbitai review

coderabbitai · 2026-07-29T06:43:39Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/tedi/components/form/search/search.tsx (1)
76-80: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Update ariaLabel documentation to describe the landmark

The prop documentation still calls ariaLabel the “search field name,” but this value now labels the outer search landmark. Rename the description to “search landmark/region name” so consumers do not assume it labels the input.

As per path instructions, keep the prop-driven accessibility contract explicit.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/tedi/components/form/search/search.tsx` around lines 76 - 80, Update the
`ariaLabel` prop documentation near `searchAriaLabel` to describe it as the
search landmark/region name rather than the search field name. Keep the
prop-driven accessibility contract explicit, including that consumers provide a
distinct landmark label through `ariaLabel`.
Source: Path instructions

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/tedi/components/form/search/search.tsx`:
- Around line 76-80: Update the search landmark label logic around
searchAriaLabel to fall back to getLabel('search') when ariaLabel is null,
undefined, or an empty string, while preserving non-empty custom labels. Add a
regression test covering an empty ariaLabel and verifying the generic search
label is used.

---

Nitpick comments:
In `@src/tedi/components/form/search/search.tsx`:
- Around line 76-80: Update the `ariaLabel` prop documentation near
`searchAriaLabel` to describe it as the search landmark/region name rather than
the search field name. Keep the prop-driven accessibility contract explicit,
including that consumers provide a distinct landmark label through `ariaLabel`.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 71436206-3263-42db-823f-3ae0bd7bfd76

📥 Commits

Reviewing files that changed from the base of the PR and between dfbddc4 and 6c6e44e.

📒 Files selected for processing (2)

src/tedi/components/form/search/search.spec.tsx
src/tedi/components/form/search/search.tsx

# [18.1.0-rc.18](react-18.1.0-rc.17...react-18.1.0-rc.18) (2026-07-29) ### Bug Fixes * **search:** stop using placeholder as Search region name [#57](#57) ([#764](#764)) ([3e0bbc6](3e0bbc6))

fix(search): stop using placeholder as Search region name #57

6c6e44e

airikej linked an issue Jul 29, 2026 that may be closed by this pull request

[Search]: WCAG react issues #57

Closed

coderabbitai Bot reviewed Jul 29, 2026

View reviewed changes

Comment thread src/tedi/components/form/search/search.tsx Outdated

fix(search): cr fixes #57

6074c71

airikej temporarily deployed to github-pages July 29, 2026 07:30 — with GitHub Actions Inactive

airikej requested a review from ly-tempel-bitweb July 29, 2026 07:38

ly-tempel-bitweb approved these changes Jul 29, 2026

View reviewed changes

airikej merged commit 3e0bbc6 into rc Jul 29, 2026
23 checks passed

airikej deleted the fix/57-search-wcag-react-issues-1 branch July 29, 2026 08:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(search): stop using placeholder as Search region name #57 - #764

fix(search): stop using placeholder as Search region name #57#764
airikej merged 2 commits into
rcfrom
fix/57-search-wcag-react-issues-1

airikej commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Uh oh!

codecov Bot commented Jul 29, 2026

Uh oh!

airikej commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

airikej commented Jul 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Uh oh!

codecov Bot commented Jul 29, 2026

Codecov Report

Uh oh!

airikej commented Jul 29, 2026

Uh oh!

coderabbitai Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

airikej commented Jul 29, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading

coderabbitai Bot commented Jul 29, 2026 •

edited

Loading